import React, { useEffect, useState } from 'react';
import { Form, Button, Modal, Select,Input } from 'antd';
import { queryList } from '../service';

const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
  type: type, //1:维修,2:保养,3:调试,4：改装，5：升级
  group: group, //0:新增,1:编辑,2:删除
}) => { 
  const [carList, setCarList] = useState([]);;
  console.log('*******type*****');
  console.log(type);
 //初始化
  useEffect(() => {
    queryList().then((data) => {
      // JSON格式转换
      setCarList(JSON.stringify(data.data) !== '{}'? data.data: []);
    });
  }, []);
  const handleConfirm = async (fieldsValue) => {
    console.log('%%%%%%%5')
    console.log(fieldsValue)
    let feilds={
      ...fieldsValue,
      id: updateModalVisible.id,
    }
    handleUpdate(feilds);
  };
  const EditRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={updateModalVisible}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item
          label="车牌号"
          name="card_id"
          rules={[{ required: true, message: '请选择车牌号!' }]}
        >
          <Select placeholder="" allowClear>
            {carList.map((item) => (
              <Select.Option value={item.card} key={item.card}>
                {item.card}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="负责人姓名"
          name="operator"
          rules={[{ required: true, message: '请输入负责人姓名!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="phone"
          validateTrigger='onBlur'
          rules={[{ required: true 
        },{
            required: true,        //在用户输入了内容后，再进行此项验证，所以要设为false
            label:"手机号",
            pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
            message: '请输入正确的手机号'
          }]}
        >
          <Input maxLength={11}/>
        </Form.Item>
        <Form.Item
          label="部门"
          name="group"
          rules={[{ required: true, message: '请输入部门!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>
        <Form.Item
          label="内容详情"
          name="content"
          rules={[{ required: true, message: '请输入内容详情!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>
        
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" >
          {group == 0 ? '新增' : '修改'}
          </Button>
        </Form.Item>
      </Form>
    );
  };
  return (
    <Modal
      width={640}
      destroyOnClose
      title={'添加信息'}
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
    >
     {group == 0 && <EditRenderContent />}
      {group == 1 && <EditRenderContent />}
    </Modal>
  );
};

export default UpdateForm;
